<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0 ,user-scalable=no">
	<title>fullPage</title>
	<link rel="stylesheet" type="text/css" href="./styles/index.css" />
	<script>
        function setRootSize(){
            var docWid = window.document.documentElement,
                width = docWid.getBoundingClientRect().width,
                fontSize = (width >= 450) ? (450 / 7.5) : width / 750 * 100;
                docWid.style.fontSize = fontSize + 'px';
        }
        window.addEventListener('resize', function() {
            setRootSize();
        }, false);
        setRootSize();
    </script>
</head>
<body>
   <div class="app">
        <div class="wrap">
            <div class="page" style="background:rgba(0,0,0,0.1);">0</div>
            <div class="page" style="background:rgba(0,0,0,0.2);">1</div>
            <div class="page" style="background:rgba(0,0,0,0.3);">2</div>
            <div class="page" style="background:rgba(0,0,0,0.4);">3</div>
            <div class="page" style="background:rgba(0,0,0,0.5);">4</div>
            <div class="page" style="background:rgba(0,0,0,0.6);">5</div>
            
        </div>
    </div>
    <span class="arrow"></span>
    <script src="../fullPage.js"></script>
	<script>
	       FullPage(document.querySelector('.wrap'));
	</script>
</body>
</html>